<template>
  <el-container>
    <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
  </el-container>
</template>


<script>
  import echarts from 'echarts';
  import {getAddNum} from '../../api/aliyun';

  export default {
    name: 'hello',
    data() {
      return {
        charts: '',
        xdata: [],
        yData: []
      };
    },
    mounted() {
      getAddNum().then(response => {
        if (!response.success) {
          this.$message.error(response.msg);
        } else {
          for (let a = 0; a < 7; a++) {
            this.xdata.push(response.data[a].nameStr);
            this.yData.push(response.data[a].numValue);
          }
          this.drawLine(this.xdata, this.yData);
        }
      });
    },
    methods: {
      drawLine(xarr, yarr) {
        this.charts = echarts.init(document.getElementById('myChart'));
        console.log(xarr);
        let option = {
          title: {
            text: '最近7日新增',
            textAlign: 'center',
            left: 'center',
            top: '20'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xarr
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: yarr,
            type: 'line'
          }]
        };
        if (option && typeof option === 'object') {
          this.charts.setOption(option, true);
        }
      }
    }
  };
</script>
